來用 Vue 玩弄 .md 囉

VuePress 有一個滿有趣的機制，我認為也是一個很有趣的特色，其實這系列剛開始的介紹篇就有提到過了，猜到我要說什麼了嗎？沒錯，就是...

VuePress 是可以直接在 .md 中使用 Vue 語法的

不過究竟如何使用呢？

跟 .vue 一樣有 <script> 與 <style> 區塊

看到這個標題有沒有覺得奇怪呢？正常的 .vue 組件其實有三個區塊的，那 <template> 跑哪去了呢？

其實答案超單純的， 整個 .md 其實都是 <template> 的範圍喔！只要你有需要插入任何 HTML 的標籤或者 Vue 的模板語法，都可以直接寫在文件中，至於寫在文件的什麼位置，就看你希望在哪裡用到囉！

像是下面這樣，就會在兩段文字段落中插入一個放大鏡的 icon 囉：

## 約定大於配置

「約定大於配置」（convention over configuration），是一種軟體開發的設計模式，目的是在減少開發人員需要做的決定，既有簡單的好處，而又不失靈活性。

<v-icon>mdi-magnify</v-icon>

簡單來說就是：如果沒有特殊的需求，只要稍微了解一下專案的結構就可以開始專注於內容主題的創作。

可以直接這樣使用的前提是 <v-icon> 組件的存放位置在 theme/global-components ，或是有用其他方式註冊組件。

範例中使用的 <v-icon> 是 Vuetify.js 這個 UI 套件所提供的組件之一，已經將組件全域註冊所以可以直接使用。

<script> 與 <style> 區塊的擺放

不過不同於模板語法可以隨處插入使用，我建議 <script> 與 <style> 還是放在檔案的結尾處比較好，能避免在單一檔案不小心重複設置好幾個區塊的狀況，而寫法就與在寫 Vue 組件類似：

<template>
  <component v-if="dynamicComponent" :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted () {
    import('./lib-that-access-window-on-import').then(module => {
      this.dynamicComponent = module.default
    })
  }
}
</script>

<style lang="stylus">
  .title
    font-size: 20px
</style>

注意在編譯階段沒有 window

因為這些處理的過程，都是透過 node.js 來進行的，還沒有真正的在瀏覽器上執行，所以編譯的 .md 或 .vue 都一樣，不要不小心用到 window 這類以瀏覽器執行時才有的 API 了。

所以如果遇到一個組件在運作時，會直接性的操作到瀏覽器 API 或 DOM ，那請先用 <ClientOnly> 的標籤包起來才可以喔，這樣這個組件就只會在瀏覽器中才運行了。

<ClientOnly>
  <NonSSRFriendlyComponent/>
</ClientOnly>